<!-- 地铁线路与客运量对比统计 -->
<template>
  <div class="h-100 w-100">
    <div style="height: 80px">
      <tablleBar
        @submit-swich="swichTable"
        :list="['年径流总量控制率', '生态岸线率']"
      ></tablleBar>
    </div>
    <div class="w-100 h-10 d-flex justify-content-end" style="position: absolute;right: 0; top: 70px;">
      <FakeLegend
        style="margin: auto 30px auto 0px"
        :color="['rgba(3, 230, 254, 1)']"
        :text="[activeItem == 0 ? '目标取值' : '建设前生态岸线率']"
      >
      </FakeLegend>
      <FakeLegend :color="['rgba(184, 235, 143, 1)']" :text="[activeItem == 0 ? '建设后实际值' : '建设后生态岸线率']">
      </FakeLegend>
    </div>
    <div class="sst1-box" style="height: calc(100% - 80px);width: 100%;overflow-x: auto;">
      <div
        id="sst1"
        style="width: 100%;height: 100%; position: relative"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import tablleBar from "@/components/project/tablleBar.vue";
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";
import { chartOptions } from "@/hook/chartOptions";
import {useFunc} from "@/hook/useFunc";

const option: any = chartOptions().twoBarOption(echarts);

let myChart: any;
const jsonData: any = inject("jsonData");
const activeItem = ref(0);

const current = computed(() => {
  let data = [[], []];
  try {
    data = jsonData.value.jsgl.sst1[activeItem.value];
  } catch (error) {}

  return data;
});

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        dataZoom: [
            {
                type: 'slider',
                height: 0,
                moveHandleSize: 10,
                xAxisIndex: 0,
                zoomLock: true,
                bottom: "20%",
                start: 0,
                end: 60
            }
        ],
        xAxis: [
          {
            data: useOptions().paishuiList.map((item: any) => item.label),
            axisLabel: {
              interval: "auto", // 自动计算间隔
              minInterval: 1, // 设置最小间隔为1
              fontSize: 20,
              color: "#667A8E",
            },
          },
        ],
        yAxis: [
          {
            name: "%",
          },
        ],
        grid: {
          bottom: "15%",
          left: "5%",
          right: "5%"
        },
        series: [{ data: val[0] ,name : activeItem.value == 0 ? '目标取值' : '建设前生态岸线率' }, { data: val[1], name: activeItem.value == 0 ? '建设后实际值' : '建设后生态岸线率' }],
      });
    }
  }
);

const swichTable = (item: any) => {
  activeItem.value = item;
};

onMounted(() => {
  myChart = echarts.init(document.getElementById("sst1") as HTMLElement);
  myChart.setOption(option);

  const scrollContainer = document.querySelector(".sst1-box");
  // useFunc().autoScroll(scrollContainer, "horizontal");
});
</script>

<style></style>
